<%@ page import="java.sql.Connection" %>
<%@ page import="com.lagou.demo03.util.DbUtil" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="com.lagou.demo03.model.Student" %>
<%@page contentType="text/html; charset=utf-8" language="java" %>
<%@ page import="java.io.*,java.util.*,java.sql.*"%>
<%@ page import="javax.servlet.http.*,javax.servlet.*" %>
<%@ page import="com.lagou.demo03.service.StudentQueryService" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <title>学生信息</title>
</head>

<body style="padding:30px;">

<form class="form-inline" action="studentDel" method="post">
    <div class="form-group">
        <!-- 新增按钮采用模态框进行员工信息的输入 -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" id="add" onclick="ch(1)">新增</button>
        <button type="submit" class="btn btn-primary" >删除</button>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#updateModal" id="update" onclick="ch(2)">编辑</button>
        <button type="button" class="btn btn-primary" onclick="ch(3)">查询</button>
    </div>
    <div class="form-group">
        <input type="text" class="from-control" placeholder="按学号查询或删除" id="inqueryId" name="delId">
    </div>

    <div class="form-group">
        <input type="text" class="from-control" placeholder="按姓名查询" id="inqueryName">
    </div>
</form>

<form action="studentUpdate" method="post" >
    <!-- 声明定义模态框组件 -->
    <div class="modal" id="updateModal" data-backdrop="static" >
        <!-- 窗口声明 -->
        <div class="modal-dialog">
            <!-- 内容声明 -->
            <div class="modal-content">
                <!-- 1.框的标题 -->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title">请输入员工信息</h4>
                </div>

                <!-- 2.框内信息 -->
                <div class="modal-body">
                    <label>修改的学员的学号</label>
                    <input type="text" id="updateId" name="updateId" placeholder="请输入学号">
                    <hr>
                    <label>学号</label>
                    <input type="text" id="uid" name="uid" placeholder="请输入学号">
                    <hr>
                    <label>姓名</label>
                    <input type="text" id="uname" name="uname" placeholder="请输入姓名">
                    <hr>
                    <label>性别</label>
                    <input type="text" id="usex" name="usex" placeholder="请输入性别">
                    <hr>
                    <label>出生日期</label>
                    <input type="text" id="ubirthday" name="ubirthday" placeholder="请输入出生日期">
                    <hr>
                    <label>邮箱</label>
                    <input type="text" id="umail" name="umail" placeholder="请输入邮箱">
                    <hr>
                    <label>备注</label>
                    <input type="text" id="unote" name="unote">

                </div>
                <!-- 3.框的按钮 -->
                <div class="modal-foter" style="float:right">
                    <button type="submit" class="btn btn-info">确定</button>
                    <button class="btn btn-warning" data-dismiss="modal">取消</button>
                </div>

            </div>
        </div>
    </div>
</form>

<form action="student" method="post" >
<!-- 声明定义模态框组件 -->
<div class="modal" id="myModal" data-backdrop="static" >
    <!-- 窗口声明 -->
    <div class="modal-dialog">
        <!-- 内容声明 -->
        <div class="modal-content">
            <!-- 1.框的标题 -->
            <div class="modal-header">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
                <h4 class="modal-title">请输入员工信息</h4>
            </div>

            <!-- 2.框内信息 -->
            <div class="modal-body">
                <label>学号</label>
                <input type="text" id="id" name="id" placeholder="请输入学号">
                <hr>
                <label>姓名</label>
                <input type="text" id="name" name="name" placeholder="请输入姓名">
                <hr>
                <label>性别</label>
                <input type="text" id="sex" name="sex" placeholder="请输入性别">
                <hr>
                <label>出生日期</label>
                <input type="text" id="birthday" name="birthday" placeholder="请输入出生日期">
                <hr>
                <label>邮箱</label>
                <input type="text" id="mail" name="mail" placeholder="请输入邮箱">
                <hr>
                <label>备注</label>
                <input type="text" id="note" name="note">

            </div>
            <!-- 3.框的按钮 -->
            <div class="modal-foter" style="float:right">
                <button type="submit" class="btn btn-info" onclick="update()">确定</button>
                <button class="btn btn-warning" data-dismiss="modal">取消</button>
            </div>

        </div>
    </div>
</div>
</form>
<%--<%List<Student>studentList = (List<Student>) request.getAttribute("list");%>--%>
<%List<Student> studentList = new StudentQueryService().studentItemService();%>
<!-- 全部员工信息 -->
<table class="table table-responsive">
    <!-- 标题 -->
    <thead>
    <tr>
        <th>序列</th>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>出生日期</th>
        <th>邮箱</th>
        <th>备注</th>
    </tr>


    <!-- 信息条目 -->
    <%for(Student s : studentList){%>
        <!-- 信息条目 -->
        <tr class="info" name="item">
            <td><input type="radio" name="num"></td>
            <td name="userId"><%=s.getId()%></td>
            <td name="userName"><%=s.getName()%></td>
            <td name="userSex"><%=s.getSex()%></td>
            <td name="userBirthday"><%=s.getBirthday()%></td>
            <td name="userMail"><%=s.getMail()%></td>
            <td name="userNote"><%=s.getNote()%></td>
        </tr>
    <%}%>
    </thead>
</table>


<!-- 引入js -->
<script src="static/js/jquery-3.3.1.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>


<script type="text/javascript">
    Index = 0;
    function ch(i){
        Index = i;
        ex();
        if(Index == 3){
            inquery();
        }
    }
    // 添加员工信息
    function update(){
        var id = $("#id").val();
        var name = $("#name").val();
        var sex = $("#sex").val();
        var note = $("#note").val();
        var mail = $("#mail").val();
        var birthday = $("#birthday").val();
        // //将数据整合成一个tr
        var list = "";
        list += '<td><input type="radio" name="num"></td>';
        list += '<td name="userId">'+ id +'</td>';
        list += '<td name="userName">'+ name +'</td>';
        list += '<td name="userSex">'+ sex +'</td>';
        list += '<td name="userBirthday">'+ birthday +'</td>';
        list += '<td name="userMail">'+ mail +'</td>';
        list += '<td name="userNote">'+ note +'</td>';
        var sum = '<tr class="info" name="item">' + list + '</tr>';
        if(Index ==1 ){
            //将新的节点添加到最后一个节点的后面
            $("tr:last").after(sum);

        }else if(Index ==2 ){
            var num = document.getElementsByName("num");
            for(var i=0;i<num.length;i++){
                if(num[i].checked){
                    //替换节点
                    $("table").find("tr:eq("+(i+1)+")").replaceWith(sum);
                }
            }
        }
    }
    //查询员工信息 通过工号或姓名
    function inquery(){
        var num = document.getElementsByName("item");
        var inqueryId = document.getElementById("inqueryId").value;
        var inqueryName = document.getElementById("inqueryName").value;
        // console.log(usersName[1]);
        // alert(usersName[1].text());
        //alert($("table").find('tr:eq(1)').find('td:eq(1)').text());
        for(var i=0;i<num.length;i++){
            var userId = $("table").find('tr:eq('+(i+1)+')').find('td:eq(1)').text();
            var userName = $("table").find('tr:eq('+(i+1)+')').find('td:eq(2)').text();
            var userSex = $("table").find('tr:eq('+(i+1)+')').find('td:eq(3)').text();
            var userBirthday = $("table").find('tr:eq('+(i+1)+')').find('td:eq(4)').text();
            var userMail = $("table").find('tr:eq('+(i+1)+')').find('td:eq(5)').text();
            var userNote = $("table").find('tr:eq('+(i+1)+')').find('td:eq(6)').text();
            if(userId == inqueryId || userName == inqueryName){
                hid(i);
            }

        }
    }
    //显示条目函数
    function ex(){
        var num = document.getElementsByName("item");
        for(var i=0;i<num.length;i++){
            $("table").find('tr:eq('+(i+1)+')').show();
        }
    }
    //隐藏条目函数
    function hid(index){
        var num = document.getElementsByName("item");
        for(var i=0;i<num.length;i++){
            if(i!=index){
                $("table").find('tr:eq('+(i+1)+')').hide();
            }
        }
    }

</script>


</body>
</html>